<template>
  <div class="pieChart">
    <!--  饼图  -->
    <el-dropdown class="posRight" trigger="hover">
      <span style="cursor: pointer">{{ timer }} <i class="el-icon-arrow-down el-icon--right" /></span>
      <el-dropdown-menu slot="dropdown" class="user-dropdown">
        <el-dropdown-item v-for="item in timerData" :key="item" @click.native="timeClick(item)">
          {{ item }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <!--  部门  -->
    <el-dropdown class="posRight" trigger="hover">
      <span style="cursor: pointer">{{ deparrment }} <i class="el-icon-arrow-down el-icon--right" /></span>
      <el-dropdown-menu slot="dropdown" class="user-dropdown">
        <el-dropdown-item v-for="item in allSele" :key="item" @click.native="seleCharts(item)">
          {{ item }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <div id="pieChart" ref="pieChart" />
  </div>
</template>

<script>
import { querySalerRankTable } from '@/api/homePageNew/salesman'
import * as echarts from 'echarts/core'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components'
import { PieChart } from 'echarts/charts'
import { LabelLayout } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
import picker from '@/components/Search/picker'

echarts.use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout
])
export default {
  mixins: [picker],
  data() {
    return {
      legendData: [], // 右侧数据 [名字]
      seriesData: [], // 饼图数据
      marketData: [], // 获取到的全部数据
      allSele: [], // 下拉部门
      deparrment: '内销部',
      timer: this.$t('market.yearOf'),
      timers: [],
      timerData: [this.$t('market.lastMonth'), this.$t('market.monthOf'), this.$t('market.yearOf')] // ['上月', '本月', '今年']
    }
  },
  created() {
    this.querySalerRankTable()
  },
  methods: {
    querySalerRankTable() {
      const DATA = {
        sd: this.timers[0],
        ed: this.timers[1]
      }
      querySalerRankTable(DATA).then(res => {
        this.marketData = res.data
        this.deparrment = res.data[0].tableName
        this.seleCharts()
      })
    },
    // 时间日期
    timeClick(item) {
      this.timer = item
      if (item === this.$t('market.lastMonth')) {
        this.shangyue()
      } else if (item === this.$t('market.monthOf')) {
        this.benyue()
      } else if (item === this.$t('market.yearOf')) {
        this.jinnian()
      }
      this.querySalerRankTable()
    },
    // 遍历饼图数据
    seleCharts(ev) {
      this.deparrment = ev || this.deparrment
      this.allSele = []
      this.seriesData = []
      this.legendData = []
      this.marketData.forEach(item => {
        this.allSele.push(item.tableName)
        if (item.tableName === this.deparrment) {
          this.seriesData = item.rankData
          item.rankData.map(ite => {
            ite.name = ite.salerName
            ite.value = ite.allPrice
            this.legendData.push(ite.salerName)
          })
          this.drawLine()
        }
      })
    },
    // 模板
    drawLine() {
      const _this = this
      // // 基于准备好的dom，初始化echarts实例
      const pieChart = echarts.init(document.getElementById('pieChart'))
      // 绘制图表
      pieChart.setOption({
        title: {
          text: _this.$t('market.salerPaihang'), // 销售排行榜
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: 10,
          top: 30,
          bottom: 20,
          data: _this.legendData
        },
        series: [
          {
            type: 'pie',
            radius: '55%',
            center: ['40%', '50%'],
            data: _this.seriesData,
            label: {
              show: true
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    }
  }
}
</script>

<style scoped lang="scss">
.pieChart {
  text-align: right;
  #pieChart {
    width: 400px;
    height: 400px;
  }
  .posRight {
    margin-right: 20px;
    font-size: 14px;
  }
}
</style>
